<template>
  <div class="app-container">
    <el-dialog :visible="remarkVisible" title="全部备注" @close="closeDialog">
      <ul class="remark_ul">
        <li v-for="(item, index) in remarklistIn" :key="index">
          <div>
            <p>时间：{{ item.createTime | formatDateMinute }}</p>
          </div>
          <p>备注：{{ item.remark }}</p>
        </li>
      </ul>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    remarkList: {
      type: Array,
      required: true
    },
    remarkVisible: {
      type: Boolean,
      required: true
    },
    remarkIndex: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      remarklistIn: []
    }
  },
  watch: {
    remarkIndex(val) {
      this.remarkIndex = val
      this.remarklistIn = this.remarkList
    }
  },
  methods: {
    closeDialog() {
      this.$emit('update:remarkVisible', false)
    }
  }
}
</script>

<style lang="scss" scop>
  .remark_ul {
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    li {
      margin: 0;
      padding: 0;
      width: 100%;
      border-bottom: 1px solid #CCC;
    }
  }
  .el-dialog__body{
    padding: 0;
  }
</style>
